<template>
	<view class="content">
		<u-bar-height></u-bar-height>
		
		<view class="back" @tap="back" :style="{top: barHeight + 'px'}"><uni-icons type="left" size="26"></uni-icons></view>
		
		<uni-section class="title" :title="title"></uni-section>
		
		<block v-if="show">
			<view class="box">
				<scroll-view scroll-y="true" :style="{height: scrollHeight + 'px'}">
					<u-single-list :list="playList" :geDanFunctions="geDanFunctions" :loadStatus="loadStatus" :refs="ref" :show="true"></u-single-list>
				</scroll-view>
			</view>
		</block>
		<block v-else>
			<view class="none">暂无记录</view>
		</block>
		
		<view class="playerBox" style="display: none;">
			<u-player-control></u-player-control>
		</view>
	</view>
</template>

<script>
	import util from '@/utils/util.js';
	export default{
		data(){
			return {
				barHeight: 0,
				title: '',
				playList: [],
				loadStatus: 'noMore',
				ref: 'playListPopup',
				geDanFunctions: [
					{text: '收藏', type: 'collection'},
					{text: '添加歌单', type: 'add'},
					{text: '查看歌手', type: 'select'}
				],
				scrollHeight: 579
			}
		},
		
		onLoad(option) {
			this.barHeight = getApp().globalData.barHeight;
			
			if(option.type == 'playList'){
				this.title = '已播放歌曲';
			}else{
				this.title = '歌单歌曲';
			}
			this.getPlayList(option.type);
		},
		
		mounted() {
			this.getScrollHeight();
		},
		
		methods: {
			back(){
				util.jump('navigateBack', '');
			},
			
			getScrollHeight(){
				let heightArr = [];
				heightArr[0] = getApp().globalData.barHeight;
				const query = uni.createSelectorQuery().in(this);
				query.select('.title').fields({size: true})
				query.exec((data) => {
					data.forEach(val => {
						heightArr.push(val.height);
					});
				
					this.scrollHeight = util.scrollHeight(heightArr);
				})
			},
			
			getPlayList(name){
				let value = JSON.parse(util.getStorageSync(name));
				if(value.length){
					this.show = true;
					
					let item = [];
					value.forEach((val, key) => {
						let list = {};
						let alArr = [];
						let arObj = {};
						list.id = val.id;
						list.name = val.name;
						alArr.picUrl = val.picUrl;
						list.al = alArr;
						arObj.id = val.singerID;
						arObj.name = val.singer;
						list.ar = [];
						list.ar.push(arObj);
						item.push(list)
						
					});
					
					this.playList = item;
				}else{
					this.show = false;
				}
			}
		}
	}
</script>

<style>
	@import url("@/static/css/iconfont.css");
	.back{
		padding: 8px;
		position: absolute;
		left: 0;
		z-index: 999;
	}
	
	.title{
		width: 100%;
		text-align: center;
	}
	
	.box{
		width: 100%;
	}
	
	.none{
		font-size: 14px;
		font-weight: bold;
		text-align: center;
		margin-top: 50px;
	}
</style>